<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%> 
<% 
  String path=request.getContextPath();
  String basePath=request.getScheme()+"://"
  							+request.getServerName()+":"
		  					+request.getServerPort()+path+"/";
  
%> 
<!DOCTYPE html>
<html lang="zh-CN"> <!--zh-CN为中文-->
<head>
	<base href="<%=basePath %>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 个人测试</title>


    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--样式表-->
    <link href="css/bt.css" rel="stylesheet"/>
</head>


<body>
<audio src="hero.mp3" autoplay="autoplay" loop="loop"></audio>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">首页</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#"><span class="glyphicon glyphicon-apple"></span></a></li>
                <li><a href="#">王者归来<span class="glyphicon glyphicon-fire"></span></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">英雄介绍<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-header">第一栏</li>
                        <li><a href="#ximingshi">烬</a> </li>
                        <li><a href="#paike">派克</a> </li>
                        <li><a href="#nvqiang">赏金猎人</a> </li>
                        <li class="divider"></li>
                        <li class="dropdown-header">第二栏</li>
                        <li><a href="#">forth</a> </li>
                    </ul>
                </li>
                <li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
            </ul>
            <form class="navbar-form navbar-right" method="post" role="search" action="/bysj/login">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="用户名..." name="username">
                    <input type="text" class="form-control" placeholder="密码..." name="password">
                </div>
                <input type="submit" class="btn btn-default" value="登录"/> 
                <input type="reset" class="btn btn-default" value="重置" />
            </form>
        </div>
    </div>
</nav>
<!--轮播-->
<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2018-05-02/5ae92e02ad98d.jpg" alt="First slide">
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2017-12-02/5a22565857499.jpg" alt="Second slide">
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2018-03-26/5ab890a118181.jpg" alt="Third slide">
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/5/59141cb57e04f.jpg" alt="Forth slide">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!--栅格系统和标签页-->
<div class="container" id="summary-container">
    <div class="row">
        <div class="col-md-4">
            <img class="img-circle" style="width: 300px; height: 250px; " src="http://pic1.win4000.com/wallpaper/2018-05-15/5afa8bca48f31.jpg" alt="伊芙琳">
            <h2>猩红之月<span class="text-muted">伊芙琳</span> </h2>
            <p>“黑夜，就是我的面纱。”~寡妇制造者</p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" style="width: 300px; height: 250px; " src="http://pic1.win4000.com/wallpaper/2018-04-11/5acd688c15ee3.jpg" alt="孙悟空">
            <h2>破空枪骑<span class="text-muted">孙悟空</span></h2>
            <p>“吃俺老孙一棒！”~齐天大圣</p>
        </div>
        <div class="col-md-4">
            <img class="img-circle" style="width: 300px; height: 250px; " src="http://pic1.win4000.com/wallpaper/2017-11-21/5a1383274a05d.jpg" alt="戏命师">
            <h2>原计划<span class="text-muted">烬</span> </h2>
            <p>“我于杀戮之中盛放,亦如黎明中的花朵。”~戏命师</p>
        </div>
    </div>
    <hr class="divider">
    <ul class="nav nav-tabs" role="tablist" id="tab-list">
        <li class="active">
            <a href="#ximingshi" role="tab" data-toggle="tab">烬</a>
        </li>
        <li>
        <a href="#paike" role="tab" data-toggle="tab">派克</a>
        </li>
        <li>
            <a href="#nvqiang" role="tab" data-toggle="tab">赏金猎人</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="ximingshi">
            <div class="row future">
                <div class="col-md-5">
                    <img class="img-responsive" src="http://pic1.win4000.com/wallpaper/2017-11-21/5a1383274a05d.jpg" alt="烬">
                </div>
                <div class="col-md-6 col-md-offset-1">
                    <h2 class="future-heading">戏命师<span class="text-muted">烬</span></h2>
                    <p>作为一名心思缜密的癫狂杀手，烬坚信谋杀是一门艺术。他曾在艾欧尼亚的监狱中服刑，但却因为执政议会里涌动着的暗流而得到释放，成为了权术斗争所利用的刺客。烬将手中的枪当成画笔，尽情地挥洒他所追求的残忍艺术，让受害者肝胆俱裂，令旁观者震悚难平。他在自己制作的阴森剧目里肆意取乐，让“恐怖”二字有了最合适不过的信使。</p>
                    <p>“艺术需要相当程度的…残忍。”~戏命师</p>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="paike">
            <div class="row future">
                <div class="col-md-7">
                    <h2 class="future-heading">血港鬼影<span class="text-muted">派克</span></h2>
                    <p>在比尔吉沃特的屠宰码头，颇有名气的鱼叉手派克葬身在一条巨大的琢珥鱼腹内……然而，他却回来了。他在家乡的阴街陋巷中徘徊着，用超自然的手段干脆残忍地解决那些鱼肉他人的恶棍——一座因捕猎怪物而自豪的城市如今发觉自己却成了狩猎的目标。</p>
                    <p>“欢迎来到…深渊…”~血港鬼影</p>
                </div>
                <div class="col-md-3 col-md-offset-2">
                     <img class="img-responsive" src="http://pic1.win4000.com/wallpaper/2018-05-22/5b037aa664b0b.jpg" alt="派克">
                </div>
            </div>
        </div>
        <div class="tab-pane" id="nvqiang">
            <div class="row future">
                <div class="col-md-5">
                    <img class="img-responsive" src="http://pic1.win4000.com/wallpaper/2018-01-19/5a61b668b30e3.png" alt="女枪">
                </div>
                <div class="col-md-6 col-md-offset-1">
                    <h2 class="future-heading">赏金猎人<span class="text-muted">莎拉</span></h2>
                    <p>对于勇敢面对符文之地严酷海洋的人，[1]能拥有一艘属于自己的船和船员，就已是个不错的成就。备受尊敬的赏金猎人莎拉，在她16岁生日时就已经完成了这个目标。莎拉将其命名为应召女郎，并乘此解决各种麻烦。
                        莎拉的女性魅力与她那两把著名小手枪"威慑"作用下，没有什么赏金任务能构成麻烦。莎拉成功合法拥有了自己的船，当然，用了一点调情的小手段来侃价。对于幸运女郎来说，事情也并非一帆风顺。在莎拉小时候，蓝焰岛北部海滩出现了贸易活动，而这也引来了海盗的窥视。很快，当地居民就陷入海贼掠夺的恐慌之中。
                        某日小莎拉回家时，听到了枪声与尖叫。她家的大门被撞开，她的母亲倒在血泊里奄奄一息。突然而来的一记重击让她倒在母亲的身旁。莎拉最后的记忆则是攻击者红色的眼睛与被盗贼头巾挡住的脸。莎拉，幸运女郎，对海盗极度不信任。她发现自己不断与声名狼藉的跳板兄（GANGPLANK，唯一一位能抵御莎拉魅力的船长）争论比尔吉沃特的政治问题。
                        莎拉有两个目标：团结比尔吉沃特的居民，建立一个强大的自治领地；另一件则是找出杀死母亲的海盗凶手。为此她加入了联盟，用一身技艺换取财富与名声，来帮助自己实现梦想。
                        "比起被其他赏金猎人逮到，更宁愿栽在幸运女郎手里"-Grinnick Torip，比尔吉沃特监狱。</p>
                    <p>“你有一双摄人心魄的眼睛,我非常喜欢～”~赏金猎人</p>
                </div>
            </div>
        </div>
    </div>
    <hr class="divider">
    <footer class="bs-docs-footer">
        <p class="pull-right"><a href="#top">回到顶部</a></p>
        <p>小舟制作</p>
    </footer>
</div>
<!--弹出框-->
<div class="modal fade" id="about">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class=""sr-only></button>
                <h4 class="modal-title">英雄联盟</h4>
            </div>
            <div class="modal-body">
                <h1>简介</h1>
                <p>《英雄联盟》(简称LOL)是由美国拳头游戏(Riot Games)开发、中国大陆地区腾讯游戏代理运营的英雄对战MOBA竞技网游。
                    游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色养成系统。
                    《英雄联盟》还致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“季中冠军赛”“全球总决赛”“All Star全明星赛”三大世界级赛事，获得了亿万玩家的喜爱，形成了自己独有的电子竞技文化。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        $("#bs-example-navbar-collapse-1 .dropdown-menu a").click(function(){
            var href = $(this).attr("href");
            $("#tab-list a[href='" + href + "']").tab("show");
        });
    });
</script>
</body>
</html>